<template>
    <div class="leftNav">
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 0 }">
            <div class="item_head" @click="changeIndex(0)">
                <div class="item_icon">
                    <!-- <img src="@/assets/images/digitalProduction/down.png" alt=""> -->
                </div>
                <span>垃圾给料系统</span>
            </div>
        </div>
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 1 }">
            <div class="item_head" @click="changeIndex(1)">
                <div class="item_icon">
                    <img src="@/assets/images/digitalProduction/down-act.png" alt="" v-show="activeIndex == 1">
                    <img src="@/assets/images/digitalProduction/down.png" alt="" v-show="activeIndex != 1">
                </div>
                <span>锅炉系统</span>
            </div>
        </div>
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 2 }">
            <div class="item_head" @click="changeIndex(2)">
                <div class="item_icon">
                    <img src="@/assets/images/digitalProduction/down-act.png" alt="" v-show="activeIndex == 2">
                    <img src="@/assets/images/digitalProduction/down.png" alt="" v-show="activeIndex != 2">
                </div>
                <span>汽机系统</span>
            </div>
        </div>
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 3 }">
            <div class="item_head" @click="changeIndex(3)">
                <div class="item_icon">
                    <img src="@/assets/images/digitalProduction/down-act.png" alt="" v-show="activeIndex == 3">
                    <img src="@/assets/images/digitalProduction/down.png" alt="" v-show="activeIndex != 3">
                </div>
                <span>公用系统</span>
            </div>
        </div>
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 4 }">
            <div class="item_head" @click="changeIndex(4)">
                <div class="item_icon">
                    <img src="@/assets/images/digitalProduction/down-act.png" alt="" v-show="activeIndex == 4">
                    <img src="@/assets/images/digitalProduction/down.png" alt="" v-show="activeIndex != 4">
                </div>
                <span>烟气系统</span>
            </div>
        </div>
        <div class="navItem" :class="{ 'navItem_active': activeIndex == 5 }">
            <div class="item_head" @click="changeIndex(5)">
                <div class="item_icon">
                    <img src="@/assets/images/digitalProduction/down-act.png" alt="" v-show="activeIndex == 5">
                    <img src="@/assets/images/digitalProduction/down.png" alt="" v-show="activeIndex != 5">
                </div>
                <span>渗滤液系统</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/routes';


let activeIndex = ref(-1);//左侧导航栏选中下标

//改变左侧导航栏选中
const changeIndex = (index: number) => {
  if (activeIndex.value != index) {
    activeIndex.value = index;
    if(index==0){
        router.push('/digitalProduction/rubbish');
    }
  }
}
const route = useRoute();
// 监听路由变化
watch(() => route.path, (newPath, oldPath) => {
  // console.log(`Route changed from ${oldPath} to ${newPath}`);
  if (newPath == '/digitalProduction/rubbish') {
    activeIndex.value = 0;
  } else {
    activeIndex.value = -1;
  }
},{immediate:true});
</script>

<style lang="scss" scoped>
.leftNav {
    position: absolute;
    left: vh(43);
    top: vh(94);
    z-index: 9;

    .navItem {

        .item_head {
            width: vh(189);
            height: vh(30);
            background: url(../../../assets/images/digitalProduction/mbg.png) no-repeat;
            background-size: 100% 100%;
            margin-bottom: vh(3);
            display: flex;
            align-items: center;
            padding-left: vh(7);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(14);
            color: #00E3FF;
            line-height: vh(30);
            cursor: pointer;

            .item_icon {
                width: vh(6);
                height: vh(8);
                margin-right: vh(8);
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 100%;
                    height: 100%;

                }
            }

        }

        &.navItem_active {
            .item_head {
                background: url(../../../assets/images/digitalProduction/mbg-act.png) no-repeat;
                background-size: 100% 100%;
                color: #FFCC00;
            }
        }
    }
}
</style>
